<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.13/dist/vue.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css">
    <style>
        .static {
            width: 140px;
            height: 140px;
            text-align: center;
            line-height: 140px;
            font-size: 40px;
            color: #fff;
        }

        .a {
            background-color: purple;
        }

        .b {
            border-radius: 50%;
        }

        .c {
            border: 3px solid #000;
        }

        .nav {
            width: 360px;
            display: flex;
            justify-content: space-between;

        }

        .nav-item {
            width: 100px;
            height: 48px;
            box-sizing: border-box;
            border-radius: 6px;
            padding: 4px 10px;
            background: #123456;
            color: #fff;
            text-align: center;
            line-height: 40px;
            cursor: pointer;

        }

        .nav-item.nav-active {
            background: #f50;
            color: #333;
        }

        .content {
            width: 360px;
            height: 360px;
            margin-top: 15px;
            overflow: hidden;

        }

        .content-item {
            width: 360px;
            height: 360px;
            border-radius: 10px;
            text-align: center;
            line-height: 360px;
            font-size: 50px;
            color: #f50;
            background: darkorchid;
        }
    </style>
</head>

<body>
    <div id="app">
        <h3>{{msg}}</h3>
        <div v-if="false">
            <!-- 已有类名绑定 -->
            <!-- 多类名、绑定类名 、属性类名  、布尔、对象、数组 -->
            <p class="static a b c">1</p>
            <p class="static" :class="'a'">2</p>
            <p class="static" :class="myclass">3</p>
            <p class="static" :class="{a:flaga , b:flagb , c:flagc}">4</p>
            <p class="static" :class="classObject">5</p>
            <p class="static" :class="['a','b']">6</p>
            <p class="static" :class="arrclass">7</p>

            <!-- 行内样式绑定 -->
            <!-- 行内样式、行内多样式、对象绑定、数组绑定 -->
            <p class="static" style="background:red">8</p>
            <p class="static" :style="{backgroundColor:'#123456',fontSize:60 +'px',color:'#f50'}">9</p>
            <p class="static" :style="myStyle">10</p>
            <p class="static" :style="[myStyle,othStyle]">11</p>
        </div>
        <div class="nav ">
            <nav class="nav-item  animate__animated animate__bounce animate__flipInX" @click="current=0"
                :class="current==0?'nav-active ':''">首页</nav>
            <nav class="nav-item  animate__animated animate__bounce animate__flipInX" @click="current=1"
                :class="current==1?'nav-active':''">登录</nav>
            <nav class="nav-item  animate__animated animate__bounce animate__flipInX" @click="current=2"
                :class="current==2?'nav-active':''">注册</nav>
        </div>
        <div class="content ">
            <div class="content-item animate__animated animate__bounce animate__fadeInUp"
                :style="{display:current==0?'block':'none'}">首页</div>
            <div class="content-item animate__animated animate__bounce animate__fadeInUp"
                :style="{display:current==1?'block':'none'}">登录</div>
            <div class="content-item animate__animated animate__bounce animate__fadeInUp"
                :style="{display:current==2?'block':'none'}">注册</div>
        </div>
    </div>
    <script>
        const vm = new Vue({
            data: {
                msg: "特殊的  属性绑定  class  &&  style",
                myclass: "a c",
                flaga: true,
                flagb: true,
                flagc: false,
                classObject: {
                    a: true,
                    b: false,
                    c: true
                },
                arrclass: ['a', 'b', 'c'],
                myStyle: {
                    background: 'blue'
                },
                othStyle: {
                    fontSize: "90px",
                    color: "red"
                },
                current: 0
            },
            mounted() {
                document.querySelectorAll("title")[0].innerHTML = this.msg;
            }

        }).$mount('#app')
    </script>
    <!-- 
                v-bind 用于 class 和 style 时，Vue.js 做了专门的增强   除了字符串之外，还可以是对象或数组
        
                v-bind
                v-bind:class 
                :class = " "  {}  []
                v-bind:style 
                :style = {}  [{}]
        
                :style="{display:current==i?'block':'none'}
             -->
</body>

</html>